<template>
	<view @touchstart="handleTouchStart" @touchend="handleTouchEnd">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				// 按下的时间
				startTime:0,
				// 按下的坐标
				startX:0,
				startY:0
			}
		},
		methods:{
			handleTouchStart(event){
				this.startTime=Date.now();
				this.startX=event.changedTouches[0].clientX;
				this.startY=event.changedTouches[0].clientY;
			},
			handleTouchEnd(event){
				const endTime=Date.now();
				const endX=event.changedTouches[0].clientX;
				const endY=event.changedTouches[0].clientY;
				// 判断按下的时长
				if(endTime-this.startTime>2000){
					return;
				}
				// 滑动的方向
				let direction=""
				if(Math.abs(endX-this.startX)>60 && Math.abs(endY-this.startY)<40){
					direction=endX-this.startX>0?"right":"left";
				}else{
					return;
				}
				// 用户做了合法的滑动操作
				// console.log(direction);
				this.$emit("swiperAction",{direction});
			}
		}
	}
</script>

<style>
</style>
